<template>
  <div class="products-container">
    <el-card class="box-card" shadow="hover">
      <h2>Products</h2>
      <el-table border :data="products" stripe style="width: 100%">
        <el-table-column align="center" prop="title" label="商品" width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="inventory"
          label="库存"
          width="180"
        >
        </el-table-column>
        <el-table-column align="center" prop="address" label="价格">
          <template slot-scope="scope">
            {{ scope.row.price | currency }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="light"
              content="添加购物车"
              placement="top"
            >
              <el-button
                size=""
                plain
                circle
                icon="el-icon-s-goods"
                type="primary"
                :disabled="!scope.row.inventory"
                @click="addProductToCart(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- <ul>
        <li v-for="product in products" :key="product.id">
          {{ product.title }} - {{ product.price | currency }}
          <br />
          <button
            :disabled="!product.inventory"
            @click="addProductToCart(product)"
          >
            Add to cart
          </button>
        </li>
      </ul> -->
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
// import { getList } from "@/api/home";
export default {
  computed: mapState({
    products: (state) => state.products.all,
  }),
  methods: {
    ...mapActions("cart", ["addProductToCart"]),
    // async getSth(){
    //   console.log(res);
    // }
  },
  created() {
    // this.getSth()
    this.$store.dispatch("products/getAllProducts");
  },
};
</script>

<style lang="less" scoped>
.products-container {
  width: 1000px;
  height: auto;
  margin: 0 auto;
  .box-card {
    width: 100%;
    padding: 10px 10px;
  }
}
</style>